<template>
	<view>
		<view class="pd5_15 typeList .flex.wrap" >
			<block v-for="(value,key) in data" :key="key">
				<view @click="getActivityByType(value.activityTypeId,key)" style="position: relative;"
					class="type-box .flex.center  .flex.alcenter alcenter  mb4 mr5 ml5">
					<image mode="aspectFill" class="type-icon" :src="value.activityTypeImg"></image>
					<text class="ft12">{{value.activityTypeName}}</text>
				</view>
			</block>
			<view @click="getActivityByType(-1,0)" style="position: relative;"
				class="type-box .flex.center  .flex.alcenter alcenter  mb4 mr5 ml5">
				<image mode="aspectFill" class="type-icon" src="/static/icon/all.png"></image>
				<text class="ft12">全部</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
			}
		},
		created() {

		},
		methods: {
			/**
			 * @param {Object} typeId 活动类型ID
			 * @param {Object} sortNum	排序值对应tabs的selectIndex，控制tabs选中状态
			 */
			getActivityByType(typeId,sortNum) {
				console.log('getActivityByType-typeId',typeId)
				console.log('getActivityByType-sortNum',sortNum)
				uni.navigateTo({
					url: '/sub_pages/activity/list?typeId='+typeId+'&selectIndex='+sortNum
				})
			},
		}
	}
</script>

<style>
	.home-header {
		height: 304rpx;
		width: 100%;
		position: relative;
		background: #363B4D;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.typeList {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	.type-box {
		flex: 0 0 calc(25% - 18px);
		/* 精确计算宽度，考虑gap间距 */
		max-width: calc(25% - 16px);
		text-align: center;
		box-sizing: border-box;

		height: 120rpx;
		flex-direction: column;
		/* 图标和名称上下排列 */
		/* background: #FFFFFF; */
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.4);
		border-radius: 32rpx;
	}

	.type-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		/* background: #F2F2F2; */
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}


	/* 确保在1024px宽度下仍保持4列 */
	/* 	@media (max-width: 1024px) {
	  .type-box {
	    flex: 0 0 calc(25% - 8px);
	    max-width: calc(25% - 8px);
	  }
	} */

	/* 移动端适配 */
	/* 	@media (max-width: 768px) {
	  .type-box {
	    flex: 0 0 calc(50% - 8px);
	    max-width: calc(50% - 8px);
	  }
	} */
</style>